<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <link rel="stylesheet" href="login/css/lrtk.css">

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .slideshow {
            position: absolute;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .slideshow-image {
            position: absolute;
            width: 100%;
            height: 100%;
            background: no-repeat 50% 50%;
            background-size: cover;
            -webkit-animation-name: kenburns;
            animation-name: kenburns;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-duration: 5s;
            animation-duration: 5s;
            opacity: 1;
        }

        .slideshow-image:nth-child(1) {
            -webkit-animation-name: kenburns-1;
            animation-name: kenburns-1;
            z-index: 3;
        }

        .slideshow-image:nth-child(2) {
            -webkit-animation-name: kenburns-2;
            animation-name: kenburns-2;
            z-index: 2;
        }

        .slideshow-image:nth-child(3) {
            -webkit-animation-name: kenburns-3;
            animation-name: kenburns-3;
            z-index: 1;
        }

        .slideshow-image:nth-child(4) {
            -webkit-animation-name: kenburns-4;
            animation-name: kenburns-4;
            z-index: 0;
        }

        @-webkit-keyframes kenburns-1 {
            0% {
                opacity: 1;
            }
            1.5625% {
                opacity: 1;
            }
            23.4375% {
                opacity: 1;
            }
            26.5625% {
                opacity: 0;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            100% {
                opacity: 0;
            }
            98.4375% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes kenburns-1 {
            0% {
                opacity: 1;
            }
            1.5625% {
                opacity: 1;
            }
            23.4375% {
                opacity: 1;
            }
            26.5625% {
                opacity: 0;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            100% {
                opacity: 0;
            }
            98.4375% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes kenburns-2 {
            23.4375% {
                opacity: 1;
            }
            26.5625% {
                opacity: 1;
            }
            48.4375% {
                opacity: 1;
            }
            51.5625% {
                opacity: 0;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            100% {
                opacity: 0;
            }
        }

        @keyframes kenburns-2 {
            23.4375% {
                opacity: 1;
            }
            26.5625% {
                opacity: 1;
            }
            48.4375% {
                opacity: 1;
            }
            51.5625% {
                opacity: 0;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            100% {
                opacity: 0;
            }
        }

        @-webkit-keyframes kenburns-3 {
            48.4375% {
                opacity: 1;
            }
            51.5625% {
                opacity: 1;
            }
            73.4375% {
                opacity: 1;
            }
            76.5625% {
                opacity: 0;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            100% {
                opacity: 0;
            }
        }

        @keyframes kenburns-3 {
            48.4375% {
                opacity: 1;
            }
            51.5625% {
                opacity: 1;
            }
            73.4375% {
                opacity: 1;
            }
            76.5625% {
                opacity: 0;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
            100% {
                opacity: 0;
            }
        }

        @-webkit-keyframes kenburns-4 {
            73.4375% {
                opacity: 1;
            }
            76.5625% {
                opacity: 1;
            }
            98.4375% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes kenburns-4 {
            73.4375% {
                opacity: 1;
            }
            76.5625% {
                opacity: 1;
            }
            98.4375% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
    </style>
</head>

<body style="background-color: #49b6f3;background-size: cover;min-height: 520px;">
    <div id="login" class="slideshow">
        <div class="slideshow-image" style="background-image: url('#login/bg/1.jpg')"></div>
        <div class="slideshow-image" style="background-image: url('#login/bg/2.jpg')"></div>
        <div class="slideshow-image" style="background-image: url('#login/bg/3.jpg')"></div>
        <div class="slideshow-image" style="background-image: url('#login/bg/4.jpg')"></div>
        <div class="wrapper" style="z-index: 5;width: 100%;position: absolute; left: 0;top: 0;">
            <div class="login">
                <form action="javascript:;" method="post" class="container offset1 loginform" style="background-color: rgba(0, 0, 0, 0.1);border-radius: 10px;border: none">
                    <div id="owl-login">
                        <div class="hand"></div>
                        <div class="hand hand-r"></div>
                        <div class="arms">
                            <div class="arm"></div>
                            <div class="arm arm-r"></div>
                        </div>
                    </div>
                    <div class="pad">
                        <div class="control-group">
                            <h3 style="color: white"></h3>
                        </div>
                        <div class="control-group login-base">
                            <div class="controls">
                                <label for="email" class="control-label fa fa-user"></label>
                                <input id="email" type="text" name="username" placeholder="用户名" tabindex="1" autofocus="autofocus" class="form-control input-medium"
                                    required minlength="3" oninvalid="setCustomValidity('用户名不能为空且长度不能小于3位')">
                            </div>
                        </div>
                        <div class="control-group login-base">
                            <div class="controls">
                                <label for="password" class="control-label fa fa-lock"></label>
                                <input id="password" type="password" name="pwd" placeholder="密码" tabindex="2" class="form-control input-medium" required
                                    minlength="4" oninvalid="setCustomValidity('密码不能为空且长度不能小于4位')">
                            </div>
                        </div>
                        <div class="control-group login-tip">
                            <div class="controls" id="tip" style="color:red;background-color: #fbe2bc;padding: 5px;display: none;text-align: center">
                            </div>
                        </div>


                        <div class="control-group" id="mps">
                            <div class="mt-card-item">
                                <div class="mt-card-avatar mt-overlay-4 mps-container" style="display: none">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions" style="background-color: rgba(0, 0, 0, 0.2);-webkit-border-bottom-left-radius: 10px;-webkit-border-bottom-right-radius: 12px;border: none;font-weight: bold">
                        <a href="javascript:;" tabindex="5" class="btn pull-left btn-link text-muted">忘记密码?</a>
                        <a href="javascript:;" tabindex="6" class="btn btn-link text-muted">注册</a>
                        <button type="submit" tabindex="4" class="btn btn-primary">登陆</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <footer>
        <div class="copyright" style="color: white;text-align:center;position: absolute;width: 100%;bottom:0;margin-bottom: 2%;z-index: 5;">
            Copyright &copy; 2017 <a href="http://www.wmeimob.com" target="_blank">www.wmeimob.com</a>. All Rights Reserved
            上海美萌软件科技有限公司 版权所有
        </div>
    </footer>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <!--<script type="text/javascript" src="js/jquery.validate.min.js"></script>-->
    <!--<script type="text/javascript" src="js/messages_zh.min.js"></script>-->
    <script type="text/javascript">
        $(function () {

            $('#login #password').focus(function () {
                $('#owl-login').addClass('password');
            }).blur(function () {
                $('#owl-login').removeClass('password');
            });
        });


        $(".text-muted").on("click", function () {
            $("#tip").html("请联系管理员").css("display", "");
        });

        var flag = true;
        $(".loginform").on("submit", function (ret) {
            if (flag) {
                flag = false;
                Shinez.post("/main/login", $(".loginform").serialize(), function (ret, status, xhr) {
                    if (ret.status == 0) {
                        //获取登陆信息
                        Shinez.setCookie(custom.authAlias, xhr.getResponseHeader(custom.authHeader));
                        Shinez.get("/main/login-info", function (ret) {
                            if (ret.status == 0) {
                                //遍历公众号
                                // if (ret.data.MPS == null) {
                                //super
                                //储存菜单map
                                localStorage.clear();
                                sessionStorage.clear();
                                localStorage.menuIconMap = JSON.stringify(ret.data.menuIconMap);
                                localStorage.dataDict =JSON.stringify(ret.data.dataDict);
                                localStorage.cityInfo =JSON.stringify(ret.data.cityInfo);
                                sessionStorage.menus = JSON.stringify(ret.data.menus);
                                sessionStorage.isLogin = 1;
                                sessionStorage.nickname = ret.data.nickname;
                                sessionStorage.userType = ret.data.userType;


                                if (ret.data.mp_nick_name != null) {
                                    localStorage.mpHeadImg = ret.data.mp_head_img;
                                    localStorage.mpNickName = ret.data.mp_nick_name;
                                }
                                location.href = "index.html";
                                return;
                                // }
                                // var mps = ret.data.MPS;
                                // if (mps != null && mps.length == 1) {
                                //     setTimeout(function () {
                                //         chooseMps(mps[0].id);
                                //     }, 400);
                                //     return;
                                // }

                                // $(".login-base").remove();
                                // $("h3").html("请选择要管理的公众号");
                                // $("#tip").css("display", "none");
                                // $(".mps-container").css("display", "");
                                // for (var i = 0; i < mps.length; ++i) {
                                //     $(".mps-container").append('<a href="javascript:chooseMps(' +
                                //         mps[i].id +
                                //         ');" style="text-decoration-line: none;color: white;margin-left: 5px;"><img src="' +
                                //         mps[i].headImg + '" style="width: 50px;"/>' + mps[i]
                                //         .nickName + '</a>');
                                // }
                            } else {
                                $("#tip").html(ret.info).css("display", "");
                                 Shinez.delCookie(custom.authAlias);
                            }
                        });

                    } else {
                        flag = true;
                        $("#tip").html(ret.info).css("display", "");
                        $("*[type=submit]").removeAttr("disabled");
                        $("input").removeAttr("disabled");
                        $("button").removeAttr("disabled");
                    }
                });

            }
        });


        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return "/";
        }

        function chooseMps(id) {
            $("*[type=submit]").prop("disabled", "disabled");
            Shinez.get("/main/chooseMps", {
                id: id
            }, function (ret, status, xhr) {
                if (ret.status == 0) {
                    Shinez.setCookie(custom.authAlias, xhr.getResponseHeader(custom.authHeader));
                    var preUrl = GetQueryString("redirect_url");
                    console.log(ret.data);
                    localStorage.clear();
                    sessionStorage.clear();
                    localStorage.menuIconMap = JSON.stringify(ret.data.menuIconMap);
                    localStorage.mpHeadImg = ret.data.mp_head_img;
                    localStorage.mpNickName = ret.data.mp_nick_name;
                    sessionStorage.menus = JSON.stringify(ret.data.menus);
                    sessionStorage.isLogin = 1;
                    sessionStorage.nickname = ret.data.nickname;
                    location.href = preUrl;

                } else {
                    flag = true;
                    alert(ret.info);
                }
            });
        }
    </script>
</body>

</html>